<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cockpit Pattern Usage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../base1/patternfly.css" type="text/css" rel="stylesheet">
    <link href="jquery-patterns.css" type="text/css" rel="stylesheet">
    <script src="../base1/jquery.js"></script>
    <script src="../base1/cockpit.js"></script>
    <script src="jquery-patterns.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>

<div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Example Dialog</h4>
            </div>
            <div class="modal-body">
                <table class="form-table-ct">
                    <tbody>
                        <tr>
                            <td class="top">
                                <label class="control-label" for="control-1">
                                    Label
                                </label>
                            </td>
                            <td>
                                <input id="control-1" class="form-control" type="text">
                            </td>
                        </tr>
                        <tr>
                            <td class="top">
                                <label class="control-label" for="control-2">
                                    Select
                                </label>
                            </td>
                            <td>
                                <!-- Note that bootstrap-select is horrible ... but we use the styling -->
                                <div class="btn-group bootstrap-select dropdown form-control" id="control-2">
                                    <button class="btn btn-default dropdown-toggle" type="button"
                                        data-toggle="dropdown">
                                        <span class="pull-left">One</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li value="one"><a role="link" tabindex="0">One</a></li>
                                        <li value="two"><a role="link" tabindex="0">Two</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">
                    Cancel
                </button>
                <button class="btn btn-default" id="clear-button">
                    Clear
                </button>
                <button class="btn btn-warning" id="fields-button">
                    Invalid
                </button>
                <button class="btn btn-danger" id="error-button">
                    Error
                </button>
                <button class="btn btn-primary" id="wait-button">
                    Wait
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <h3>Dialogs</h3>
    <button class="btn btn-default" data-target="#test-dialog" data-toggle="modal">
        Show Dialog
    </button>
    <hr>
</div>

<div class="container-fluid">

    <table class="listing-ct">
        <thead>
            <tr>
                <td colspan="5">
                    <h3>Listing with Panels</h3>
                </td>
            </tr>
            <tr>
                <th class="listing-ct-toggle"></th>
                <th>Name</th>
                <th>Project</th>
                <th>Address</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="listing-ct-item">
                <td class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>frontend</th>
                <td>aoeuaoeu</td>
                <td>127.30.168.10</td>
                <td>Running</td>
            </tr>
            <tr class="listing-ct-panel">
                <td colspan="5">
                    <div class="listing-ct-head">
                        <div class="listing-ct-actions">
                            <button title="Adjust" class="btn btn-default pficon pficon-edit"></button>
                        </div>
                        <ul class="nav nav-tabs nav-tabs-pf">
                            <li class="active"><a href="#">Pod</a></li>
                            <li><a href="#">Containers</a></li>
                            <li><a href="#">Logs</a></li>
                            <li><a href="#">Shell</a></li>
                        </ul>
                    </div>
                    <div class="listing-ct-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <dl>
                                    <dt>Project</dt>
                                    <dd>aoeuaoeu</dd>
                                    <dt>Created</dt>
                                    <dd title="2015-09-26 15:33">14 days ago</dd>
                                    <dt>Restart Policy</dt>
                                    <dd>Always</dd>
                                    <dt>Service Account</dt>
                                    <dd>default</dd>
                                    <dt>DNS Policy</dt>
                                    <dd>ClusterFirst</dd>
                                    <dt>Phase</dt>
                                    <dd>running</dd>
                                    <dt>Node</dt>
                                    <dd>openshiftdev.local</dd>
                                    <dt>Pod Address</dt>
                                    <dd>1.2.3.4</dd>
                                </dl>
                            </div>
                            <div class="col-sm-6">
                                <dl class="full-width">
                                    <dt>Labels</dt>
                                    <dd>name=frontend</dd>
                                    <dd>template=ruby-hello-world</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr class="listing-ct-item">
                <td class="listing-ct-toggle">
                    <i class="fa fa-fw"></i>
                </td>
                <th>redis-master</th>
                <td>aoeuaoeu</td>
                <td>127.30.173.79:6379</td>
                <td>Ready</td>
            </tr>
            <tr class="listing-ct-panel">
                <td colspan="5">
                    <div class="listing-ct-head">
                        <div class="listing-ct-actions">
                            <button title="Adjust" class="btn btn-default pficon pficon-edit"></button>
                        </div>
                        <ul class="nav nav-tabs nav-tabs-pf">
                            <li class="active"><a href="#">Pod</a></li>
                            <li><a href="#">Containers</a></li>
                            <li><a href="#">Logs</a></li>
                            <li><a href="#">Shell</a></li>
                        </ul>
                    </div>
                    <div class="listing-ct-body">
                        <div class="row">
                            <div class="col-sm-6">
                                <dl>
                                    <dt>Project</dt>
                                    <dd>aoeuaoeu</dd>
                                    <dt>Created</dt>
                                    <dd title="2015-09-26 15:33">10 days ago</dd>
                                    <dt>Restart Policy</dt>
                                    <dd>Always</dd>
                                    <dt>Service Account</dt>
                                    <dd>default</dd>
                                    <dt>DNS Policy</dt>
                                    <dd>ClusterFirst</dd>
                                    <dt>Phase</dt>
                                    <dd>running</dd>
                                    <dt>Node</dt>
                                    <dd>openshiftdev.local</dd>
                                    <dt>Pod Address</dt>
                                    <dd>1.2.3.5</dd>
                                </dl>
                            </div>
                            <div class="col-sm-6">
                                <dl class="full-width">
                                    <dt>Labels</dt>
                                    <dd>name=redis-master</dd>
                                    <dd>template=ruby-hello-world</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <table class="listing-ct">
        <thead>
            <tr>
                <td colspan="2">
                    <h3>Listing with Timeline</h3>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="timeline-ct timeline-ct-end">
                        <i class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
                        <div class="listing-ct-panel listing-ct-maybe">
                            <div class="listing-ct-head">
                                <div class="listing-ct-actions">
                                    <button class="btn btn-default">Check for updates</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>
                    <div class="timeline-ct">
                        <i class="fa fa-circle timeline-ct-point"></i>
                        <div class="listing-ct-panel">
                            <div class="listing-ct-head">
                                <div class="listing-ct-actions">
                                    <button class="btn btn-primary">Update and reboot</button>
                                </div>
                                <h3>fedora-atomic: 24.2</h3>
                                <div class="listing-ct-status">
                                    Available
                                </div>
                                <ul class="nav nav-tabs nav-tabs-pf">
                                    <li><a href="#">Tree</a></li>
                                    <li class="active"><a href="#">Packages</a></li>
                                </ul>
                            </div>
                            <div class="listing-ct-error alert" ng-if="error">
                                <span class="pficon pficon-warning-triangle-o"></span>
                                There was an error
                            </div>
                            <div class="listing-ct-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <dl>
                                            <dt>Operating System</dt>
                                            <dd>fedora-atomic</dd>
                                            <dt>Revision Number</dt>
                                            <dd>24.2</dd>
                                            <dt>Released</dt>
                                            <dd title="2015-09-26 15:33">3 days ago</dd>
                                        </dl>
                                    </div>
                                    <div class="col-sm-6">
                                        <dl>
                                            <dt>Additions</dt>
                                            <dd>10 packages</dd>
                                            <dt>Removals</dt>
                                            <dd>3 packages</dd>
                                            <dt>Changes</dt>
                                            <dd>18 packages</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody class="active">
            <tr>
                <td>
                    <div class="timeline-ct">
                        <i class="fa fa-check-circle-o timeline-ct-point timeline-ct-lg active"></i>
                        <div class="listing-ct-panel">
                            <div class="listing-ct-head">
                                <div class="listing-ct-actions">
                                </div>
                                <div class="listing-ct-status">
                                    Installed
                                </div>
                                <h3>fedora-atomic: 24.1</h3>
                                <ul class="nav nav-tabs nav-tabs-pf">
                                    <li class="active"><a href="#">Tree</a></li>
                                    <li><a href="#">Packages</a></li>
                                </ul>
                            </div>
                            <div class="listing-ct-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <dl>
                                            <dt>Operating System</dt>
                                            <dd>fedora-atomic</dd>
                                            <dt>Revision Number</dt>
                                            <dd>24.1</dd>
                                            <dt>Released</dt>
                                            <dd title="2015-08-29 15:33">1 month ago</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>
                    <div class="timeline-ct">
                        <div class="timeline-ct-point timeline-ct-md">
                            <div class="spinner"></div>
                        </div>
                        <div class="listing-ct-panel">
                            <div class="listing-ct-head">
                                <div class="listing-ct-actions">
                                </div>
                                <div class="listing-ct-status">
                                    Downloading manifests 85%
                                </div>
                                <h3>fedora-atomic: 24.0</h3>
                                <ul class="nav nav-tabs nav-tabs-pf">
                                    <li class="active"><a href="#">Tree</a></li>
                                    <li><a href="#">Packages</a></li>
                                </ul>
                            </div>
                            <div class="listing-ct-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <dl>
                                            <dt>Operating System</dt>
                                            <dd>fedora-atomic</dd>
                                            <dt>Revision Number</dt>
                                            <dd>24.1</dd>
                                            <dt>Released</dt>
                                            <dd title="2015-08-29 15:33">1 month ago</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>
